<template>
  <div style="width: 100%; height: 100%">
    <el-row>
      <el-button plain type="primary" @click="saveData()">保存</el-button>
      <el-button plain type="success" @click="openData()">刷新</el-button>
    </el-row>
    <el-row>
      <div class="my-block">
        <!-- 模块信息 -->
        <table border="1">
          <colgroup>
            <col style="width: 16rem; max-width: 16rem" />
            <col style="width: 32rem" />
            <col style="width: 16rem; max-width: 16rem" />
            <col style="width: 32rem" />
            <col style="width: 16rem; max-width: 16rem" />
            <col style="width: 32rem" />
          </colgroup>
          <tbody>
            <tr>
              <td class="title"><span style="color: red"> * </span>接口代码</td>
              <td>
                <el-input v-model="FModuleBase.FModuleCode"></el-input>
              </td>
              <td class="title"><span style="color: red"> * </span>接口标签</td>
              <td>
                <el-input v-model="FModuleBase.FModuleCaptoin"></el-input>
              </td>
              <td class="title">启用</td>
              <td align="center">
                <el-switch v-model="FModuleBase.FbUse"></el-switch>
              </td>
            </tr>
            <tr>
              <td class="title">授权模式</td>
              <td colspan="5">
                <el-input v-model="FModuleBase.fModuleAuthor"></el-input>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="my-block">
        <el-tabs type="border-card">
          <el-tab-pane>
            <template #label>
              <span><i class="el-icon-date"></i>执行步骤</span>
            </template>
            <TFrmModuleDataList ref="FrmDataList"></TFrmModuleDataList>
          </el-tab-pane>
          <el-tab-pane>
            <template #label>
              <span><i class="el-icon-date"></i>字段信息</span>
            </template>
            <TFrmModuleFieldList ref="FrmFieldList"></TFrmModuleFieldList>
          </el-tab-pane>
          <el-tab-pane>
            <template #label>
              <span><i class="el-icon-date"></i>条件参数信息</span>
            </template>
            <TFrmModuleFilterList ref="FrmFilterList"></TFrmModuleFilterList>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-row>
  </div>
</template>

<script  lang="ts">
import BaseForm from "@/views/BaseForm";
import { Options } from "vue-class-component";
import { TModuleBase, TModuleDataSet, TModuelInfo } from "@/baselib/module/BaseClass";
import TFrmModuleDataList from "@/views/moduleSet/TFrmModuleDataList.vue";
import TFrmModuleFieldList from "@/views/moduleSet/TFrmModuleFieldList.vue";
import TFrmModuleFilterList from "@/views/moduleSet/TFrmModuleFilterList.vue";

//配合着用
@Options({
  props: {},
  components: {
    TFrmModuleDataList,
    TFrmModuleFieldList,
    TFrmModuleFilterList,
  },
})
export default class TFormModuleEdit extends BaseForm {
  declare $refs: {
    FrmDataList: TFrmModuleDataList;
    FrmFieldList: TFrmModuleFieldList;
    FrmFilterList: TFrmModuleFilterList;
  };

  private FModuleID: string = "";
  private FModuleInfo: TModuelInfo = new TModuelInfo();
  private FModuleBase: TModuleBase = new TModuleBase();
  private FIndexData: TModuleDataSet = new TModuleDataSet();
  private FDelIDs: string[] = [];

  public created() {
    if (this.zIndexTag != undefined) {
      this.FModuleID = this.zIndexTag.menuParams.moduleID;
      this.openData();
    } else {
      this.$myMsgHelp.msgHintNotClose("参数[indexTag]为空");
    }
  }
  public mounted() {
    this.$refs.FrmDataList.FOnIndexDataChange = this.onIndexDataChange;
    this.$refs.FrmDataList.FOnDel = this.onDels;
    this.$refs.FrmFieldList.FOnDel = this.onDels;
    this.$refs.FrmFilterList.FOnDel = this.onDels;
  }
  private onIndexDataChange(qIndexData: TModuleDataSet) {
    this.FIndexData = qIndexData;
    this.$refs.FrmFieldList.FIndexData = this.FIndexData;
    this.$refs.FrmFilterList.FIndexData = this.FIndexData;
  }
  private onDels(qID: string) {
    this.FDelIDs.push(qID);
  }
  private async openData() {
    let lResult = await this.$myModuleAPI.getModuleInfo(this.FModuleID);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgHintNotClose(lResult.resultMsg);
      return;
    }
    this.FDelIDs = [];
    this.FModuleInfo = lResult.resultData;
    this.FModuleBase = this.FModuleInfo.moduleBase;
    this.$refs.FrmDataList.FModuleDataList = this.FModuleInfo.moduleDataList;
    this.$myMsgHelp.msgHintAutoClose("获取数据成功");
  }
  private async saveData() {
    this.FModuleInfo.delIDs = this.FDelIDs;
    let lResult = await this.$myModuleAPI.saveModuleInfo(this.FModuleInfo);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgHintNotClose(lResult.resultMsg);
      return;
    }
    this.$myMsgHelp.msgHintAutoClose("保存数据成功");
    this.openData();
  }
}
</script>

<style>
.my-block {
  border: 2px solid #ebebeb;
  border-radius: 5px;
  transition: 0.2s;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #000000;
}

table {
  border-collapse: collapse;
}

table,
table tr td {
  border: 1px solid #ccc;
}

.title {
  background-color: #d9d9d9;
  padding-left: 10px;
}
</style>

function Ref() {
  throw new Error("Function not implemented.");
}

function Prop(arg0: {
  type: StringConstructor; // 父组件传递给子组件的数据类型
  required: boolean; // 是否必填
  default: string;
}) {
  throw new Error("Function not implemented.");
}
